<template>
  <view class="page">
    <!-- 顶栏 -->
    <u-navbar
      :is-back="false"
      title="车辆编辑"
      title-color="#000"
      title-size="38"
      :border-bottom="false"
    >
      <template v-slot:right>
        <!-- <view class="notice btn">本季度有6条通知</view> -->
      </template>
    </u-navbar>

    <!-- 本季度违章 -->
    <view class="quarterly-violation-page">
      <view class="quarterly-violation">
        <view class="quarterly-violation-top">
          <view class="quarterly-violation-top-left">
            <view class="quarterly-violation-top-left-title">本季度违章：</view>
            <view class="quarterly-violation-top-left-num">{{
              violationData.violation_num
            }}</view>
          </view>
          <view class="quarterly-violation-top-right">
            <view class="select-btn" @click="select('left')">
              归口选择
              <image
                class="select-btn-img"
                src="/static/img/btn-select.svg"
                mode=""
              ></image>
              <view class="select-pop" v-show="selectTime == 'left'">
                <!-- <view class="left"></view> -->
                <view class="right"></view>
                <view class="select-pop-btn">本季度至今</view>
                <view class="time">
                  <view class="time-item">2021年3月5日</view>
                  <text>至</text>
                  <view class="time-item">2021年3月5日</view>
                </view>
                <view class="time-select">
                  <view class="time-select-title">通行证违章率时期</view>
                  <!-- uni 滚动 -->
                  <scroll-view
                    class="time-select-scroll"
                    scroll-y
                    scroll-top="0"
                    :show-scrollbar="true"
                  >
                    <view class="time-select-item" v-for="item in focusData"
                     @click.stop="selectFocus(item.focus_id)"
                      >{{ item.start_time }} - {{ item.end_time }}</view
                    >
                  </scroll-view>
                </view>
              </view>
            </view>

            <view class="select-btn" @click="select('right')" v-if="false">
              本时期至今
              <image
                class="select-btn-img"
                src="/static/img/btn-select.svg"
                mode=""
              ></image>
              <view class="select-pop" v-show="selectTime == 'right'">
                <view class="right"></view>
                <view class="select-pop-btn">本季度至今</view>
                <view class="time">
                  <view class="time-item">2021年3月5日</view>
                  <text>至</text>
                  <view class="time-item">2021年3月5日</view>
                </view>
                <view class="time-select">
                  <view class="time-select-title">通行证违章率时期</view>
                  <!-- uni 滚动 -->
                  <scroll-view
                    class="time-select-scroll"
                    scroll-y
                    scroll-top="0"
                    :show-scrollbar="true"
                  >
                    <view
                      class="time-select-item"
                      v-for="item in focusData"
                      @click="selectFocus(item.focus_id)"
                      >{{ item.start_time }} - {{ item.end_time }}</view
                    >
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="quarterly-violation-bottom">
          <view class="quarterly-violation-bottom-col">
            <view class="quarterly-violation-bottom-col-item">
              本季度违章车辆：
              <span>{{ violationData.car_num }}个</span>
            </view>
            <view class="quarterly-violation-bottom-col-item">
              本季度总扣分：
              <span>{{ violationData.fraction }}分</span>
            </view>
          </view>
          <view class="quarterly-violation-bottom-col">
            <view class="quarterly-violation-bottom-col-item">
              本季度总罚款：
              <span>{{ violationData.fine }}元</span>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 间隔 -->
    <view class="col-interval"></view>
    <!-- 本时期条数 -->
    <view class="time-bar">
      <view class="time-bar-title">本时期</view>
      <view class="time-bar-content">
        <view
          class="time-bar-content-item"
          v-for="(item, index) in sNumList"
          @click="selectNum(item)"
        >
          <span :class="{ 'time-bar-content-item-select': item == sNum }"
            >{{ item }}条</span
          >
        </view>
      </view>
      <view class="time-bar-right">
        预警
        <image
          class="time-bar-right-arrow"
          src="../../static/img/arrow-right.svg"
        ></image>
      </view>
    </view>
    <!-- 罚款列表 -->
    <view class="fine-list" v-if="violationData.violations.length != 0">
      <view class="fine-list-head">
        <view class="fine-list-head-item">车牌号</view>
        <view class="fine-list-head-item">次数</view>
        <view class="fine-list-head-item">扣分</view>
        <view class="fine-list-head-item">罚款</view>
      </view>
      <view
        class="fine-list-item"
        v-for="item in violationData.violations"
        @click="toViolationDetail(item.plate_num)"
      >
        <view>{{ item.plate_num }}</view>
        <view>{{ item.violation_num }}次</view>
        <view>{{ item.fraction }}分</view>
        <view>{{ item.fine }}元</view>
      </view>
    </view>
    <view class="fine-none" v-else>
      <image src="/static/img/none-car.svg" mode=""></image>
      <view class="text">本时期没有违章</view>
    </view>
  </view>
</template>

<script>
import { getViolation, getFocus } from "@/api/home.js";
export default {
  data() {
    return {
      violationData: {},
      focusData: [],
      selectTime: "",
      focus_id: null,
      sNum: 9,
      sNumList: [9, 6, 3, 2],
    };
  },
  created() {
    getViolation().then((res) => {
      this.violationData = res.data.data;
    });

    getFocus().then((res) => {
      this.focusData = res.data.data;
    });
  },
  methods: {
    toViolationDetail(plate) {
      uni.navigateTo({
        url: "/pages/violationDetail/violationDetail?plate=" + plate,
      });
    },
    select(item) {
      if (item == this.selectTime) {
        this.selectTime = "";
        return;
      }
      this.selectTime = item;
    },
    selectNum(num) {
      this.sNum = num;
      let data = {};
      if (this.focus_id) {
        data.focus_id = this.focus_id;
      }
      data.violation_num = num;
      console.log(data);
      getFocus(data).then((res) => {
        this.focusData = res.data.data;
      });
    },
    selectFocus(focus_id) {
      this.focus_id = focus_id;
      let data = {
        focus_id: focus_id,
      };
      getFocus(data).then((res) => {
        this.focusData = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.notice {
  background-color: #2b6cfc;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30rpx;
  padding: 8rpx 16rpx;
  letter-spacing: -1rpx;
  font-size: 26rpx;
}

.col-interval {
  height: 16rpx;
  background-color: #f3f6f8;
}

.quarterly-violation-page {
  background-image: url("data:image/svg+xml,%3Csvg width='776' height='370' viewBox='0 0 776 370' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cg filter='url(%23filter0_d)'%3E %3Cpath d='M725.125 27.0732H50.8746C39.3459 27.0732 30 37.2467 30 49.7964V320.204C30 332.753 39.3459 342.927 50.8746 342.927H725.125C736.654 342.927 746 332.753 746 320.204V49.7964C746 37.2467 736.654 27.0732 725.125 27.0732Z' fill='url(%23paint0_linear)'/%3E %3C/g%3E %3Cpath opacity='0.12' d='M30 320.204V49.7965C30 43.7699 32.1993 37.9901 36.114 33.7287C40.0288 29.4672 45.3383 27.0732 50.8746 27.0732H493.65C488.358 79.8094 459.025 222.472 296.516 224.445C118.441 226.604 57.6349 260.622 30.001 320.464C30 320.375 30 320.29 30 320.204Z' fill='white'/%3E %3Cpath opacity='0.12' d='M689.893 94.8817C656.24 87.4058 662.87 43.8907 666.776 27.0732H725.125C730.662 27.0732 735.971 29.4672 739.886 33.7286C743.801 37.9901 746 43.7699 746 49.7964V144.674C737.553 128.751 719.142 101.379 689.893 94.8817Z' fill='white'/%3E %3Cpath opacity='0.12' d='M437.168 342.927C438.651 302.608 454.408 264.477 481.138 236.521C507.869 208.565 543.5 192.952 580.568 192.953C617.637 192.952 653.268 208.565 679.999 236.521C706.729 264.477 722.486 302.608 723.969 342.927H437.168Z' fill='white'/%3E %3C/g%3E %3Cdefs%3E %3Cfilter id='filter0_d' x='0' y='7.07317' width='776' height='375.854' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E %3CfeOffset dy='10'/%3E %3CfeGaussianBlur stdDeviation='15'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.101961 0 0 0 0 0.533333 0 0 0 0 1 0 0 0 0.2 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E %3C/filter%3E %3ClinearGradient id='paint0_linear' x1='30' y1='209.637' x2='744.154' y2='169.164' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%231A88FF'/%3E %3Cstop offset='1' stop-color='%232C6BFC'/%3E %3C/linearGradient%3E %3CclipPath id='clip0'%3E %3Crect width='776' height='370' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E ");
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 30rpx;
  height: 360rpx;
  color: #ffffff;

  .quarterly-violation {
    // background-color: #007AFF;
    padding: 30rpx 40rpx;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    &-top {
      display: flex;
      justify-content: space-between;
      &-left {
        &-title {
          font-size: 32rpx;
        }

        &-num {
          font-size: 60rpx;
          font-weight: 600;
          transform: scaleY(1.1);
        }
      }
      &-right {
        display: flex;
        justify-content: right;
        align-items: baseline;
        text-align: center;
        .select-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 2rpx solid #ffffff;
          border-radius: 50px;
          padding: 8rpx 10rpx;
          margin-right: 20rpx;
          font-size: 22rpx;
          &-img {
            width: 22rpx;
            height: 16rpx;
            margin-left: 20rpx;
          }
        }
      }
    }

    &-bottom {
      font-size: 26rpx;

      &-col {
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;

        &-item {
          color: #ffffffcc;

          span {
            color: #ffffff;
          }
        }
      }
    }
  }
}

// 弹窗
.select-pop {
  position: absolute;
  top: 100rpx;
  right: 0;
  width: 500rpx;
  border-radius: 10rpx;
  height: 700rpx;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  z-index: 900;
  padding: 20rpx;
  // 三角形
  .left,
  .right {
    width: 0rpx;
    height: 20rpx;
    border-bottom: 20rpx solid #ffffff;
    border-left: 20rpx solid transparent;
    border-right: 20rpx solid transparent;
    position: absolute;
    top: -20rpx;
  }
  .left {
    left: 130rpx;
  }
  .right {
    right: 130rpx;
  }
  &-btn {
    width: 200rpx;
    height: 54rpx;
    background-color: #007aff;
    border-radius: 50rpx;
    color: #ffffff;
    line-height: 54rpx;
    margin: 0 auto;
  }
  .time {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    color: #007aff;
    align-items: center;
    text {
      margin: 0 10rpx;
    }
    .time-item {
      flex: 1;
      padding: 10rpx;
      border-radius: 5rpx;
      border: 2rpx solid #007aff;
      text-align: center;
      font-size: 28rpx;
    }
  }

  .time-select {
    color: #333;
    text-align: left;
    margin-top: 20rpx;
    &-scroll {
      height: 470rpx;
    }
    &-title {
      font-size: 28rpx;
    }
    &-item {
      padding: 20rpx;
      font-size: 26rpx;
      color: #666666;
      text-align: center;
      border-bottom: 1rpx solid #f0f0f0;
    }
  }
}

.time-bar {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  font-size: 30rpx;
  color: #666666;
  border-bottom: 2rpx solid #e6e6e6;

  &-title {
    margin-right: 40rpx;
  }

  &-content {
    margin: 0 40rpx;
    flex: 1;
    display: flex;
    justify-content: space-between;

    &-item {
      span {
        padding: 5rpx 20rpx;
        border-radius: 50rpx;
      }

      &-select {
        background-color: #d4e1ff;
        color: #2b6cfc;
      }
    }
  }

  &-right {
    color: #ff0000;
    display: flex;
    align-items: center;

    &-arrow {
      display: inline-block;
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.fine-list {
  // padding: 0 30rpx;
  &-head {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    justify-content: space-between;
    font-size: 30rpx;
    font-weight: 700;

    &-item {
      flex: 1;
      text-align: center;
    }
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    justify-content: space-between;

    & > view {
      flex: 1;
      text-align: center;
    }
  }
}

.fine-none {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image {
    width: 400rpx;
    height: 400rpx;
    margin: 100rpx 0;
  }
  .text {
    margin-top: 0rpx;
    font-size: 34rpx;
  }
}
</style>
